<template>
    <div class="profile">
        <header id="wx-header">
            <div class="center">
                <!-- <router-link to="/contact" tag="div" class="iconfont icon-return-arrow">
                    <span></span>
                </router-link> -->
                <div to="/contact" tag="div" class="iconfont icon-return-arrow" @click="$router.back()">
                    <span></span>
                </div>
                <span>详细资料</span>
            </div>
        </header>
        <div class="weui-cells" v-if="userInfo.getClientMid">
            <div class="weui-cell">
                <div class="weui-cell__hd"><img :src="userInfo.getClientMid.headimg" alt="" class="self-header" style="width:60px">
                </div>
                <div class="weui-cell__bd">
                    <h4 class="self-nickname" >{{userInfo.remark?userInfo.remark:userInfo.getClientMid.nickname}}
                        <span class="gender" :class="[userInfo.sex===1?'gender-male':'gender-female']" v-if="userInfo.sex>0"></span>
                    </h4>
                    <p class="self-wxid" style="font-size: 13px;color: #999;">uid: {{userInfo.getClientMid.id}}</p>
                    <p class="nickname" style="font-size: 13px;color: #999;" v-if="userInfo.remark">昵称:{{userInfo.getClientMid.nickname||'无'}}</p>
                
                </div>
            </div>
        </div>
        <div class="weui-cells" v-if="userInfo.getClientMid && (userInfo.getClientMid.friend_status==1 || userInfo.getClientMid.friend_status==3)">
            <div class="weui-cell weui-cell_access" @click="showNickname = true">
                <div class="weui-cell__bd">
                    <p>设置备注</p>
                </div>
                <div class="weui-cell__ft">

                </div>
            </div>
        </div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>地区</p>
                </div>
                <div class="weui-cell__ft" style="flex: 4;text-align: left;">
                    <span v-for="(item,index) in userInfo.area" :key="index">{{item}}&nbsp;&nbsp;&nbsp;</span>
                </div>
            </div>
            <div class="weui-cell " v-if="userInfo.getClientMid && userInfo.getClientMid.mobile">
                <div class="weui-cell__bd">
                    <p>电话号码</p>
                </div>
                <div class="weui-cell__ft">
                    {{userInfo.getClientMid.mobile}}
                </div>
            </div>
            <!-- <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">
                    <p>个人相册</p>
                </div>
                <div class="weui-cell__ft" style="flex: 4;text-align: left;">
                    <div class="album-list">
                        <img :src="item.imgSrc" style="width:50px;margin:0 5px" :key="index"
                            v-for="(item,index) in userInfo.album">
                    </div>
                </div>
            </div> -->

        </div>
        <!-- ,name:userInfo.remark ||userInfo.getClientMid.nickname ,group_num:1 -->
        <router-link 
        v-if="userInfo.getClientMid  && userInfo.getClientMid.friend_status==3"
        class="weui-btn weui-btn_primary"  style="width:90%;margin-top:20px;color:#fff"
        :to="{ path: '/wechat/dialogue', query: { mid: userInfo.getClientMid.id}}">
          <div class="weui-cell_bd weui-cell_primary">
           发消息
          </div>
        </router-link>


        <div 
        v-if="auditStatus"
        class="weui-btn weui-btn_default"  style="width:90%;margin-top:20px;color:#999"
        :to="{ path: '/wechat/dialogue', query: { mid: userInfo.mid}}"
        >
            <div class="weui-cell_bd weui-cell_primary"> 等待验证 </div>
        </div>

        <div 
        v-if="userInfo.getClientMid && userInfo.getClientMid.friend_status!=3 && !auditStatus"
        class="weui-btn weui-btn_default"  style="width:90%;margin-top:20px;color:#3079ff"
        :to="{ path: '/wechat/dialogue', query: { mid: userInfo.mid}}"
        @click="addFrinedMsg"
        >
          <div class="weui-cell_bd weui-cell_primary">
           添加通讯录
          </div>
        </div>
        <!-- <a href="javascript:;" class="weui-btn weui-btn_primary" >发消息</a> -->
        <!-- <a href="javascript:;" class="weui-btn weui-btn_default" style="width:90%" >视频</a> -->

        <div
        v-if="userInfo.getClientMid && userInfo.getClientMid.friend_status==3"
        class="weui-btn weui-btn_default"  style="width:90%;margin-top:20px;color:red"
        @click="deleteFriend"
        >
          <div class="weui-cell_bd weui-cell_primary">
           删除
          </div>
        </div>

    <upInfo 
    :text="userInfo.remark" 
    title="修改备注" 
    desc="" 
    :isEmpty="true"
    v-if="showNickname" @onSubmit="UpUserAlias" ></upInfo>

    </div>
</template>
<script>
import upInfo from '@/components/common/up-info.vue'
import { ApiSetUserName } from '@/api/api/UserGroup'
import { ApiaddFrinedMsg, ApideleteFriend, ApiGetNewFriendStatus, ApiGetUserInfo } from '@/api/api/Client'
import { showToast } from '@/utils/comm'

    export default {
        data() {
            return {
                pageName: "",
                showNickname:false,
                alias:'',
                mid:0,
                groupName:'',//如果是从群聊过来的 则该参数是群昵称

                userInfo:{},//用户信息
                auditStatus:0,//1 存在申请记录  0 不存在
            }
        },
        mounted(){
            // console.log('我是Contact/details页面的 mounted方法')
            this.init();
        },
        methods:{
            async init (){
                let userInfo = this.getStateUserInfo()
                let params = {mid:this.mid}                
                // 从vuex中获取失败， 则从api中获取
                if(!userInfo?.id){
                    let res =  await ApiGetUserInfo(params)
                    let data = res.data
                    userInfo['getClientMid'] = data
                }
                //单方面好友 检查是否有好友申请记录
                if(userInfo?.getClientMid?.friend_status==1){
                    let {data} = await ApiGetNewFriendStatus(params)
                    this.auditStatus = data.auditStatus
                }

                this.userInfo = userInfo
            },
            // 从vueX中获取
            getStateUserInfo(){
                let wxid = this.$route.query.wxid
                this.groupName = this.$route.query.groupName || ''
                this.mid = wxid
                // 会话列表
                let {allContacts} = this.$store.state;
                let info = {}
                for(let i in allContacts){
                    if(allContacts[i].mid == wxid){
                        info = allContacts[i]
                        break;
                    }
                }
                return info
            },
            /**
             * 删除好友
             */
            deleteFriend(){
                ApideleteFriend({mid:this.mid}).then(({msg})=>{
                    this.userInfo.getClientMid.friend_status = 0
                    // 强制更新
                    this.$store.commit('setPageRefresh',{page:'contactStatus',status:true})
                })
            },

            /**
             * 发起好友申请
             */
            addFrinedMsg(){
                // console.log(this.userInfo,'---用户信息')
                let desc,from
                let nickname = this?.userInfo?.getClientMid?.nickname||''
                if(this.groupName){
                    desc = `我是群聊”${this.groupName}“的${nickname}`
                    from = '群聊'
                }else{
                    desc = `我是${nickname}`
                    from = '账户搜索'
                }
                let params = {
                    mid:this.mid,
                    desc:desc,
                    from:from,
                }
                ApiaddFrinedMsg(params).then(({msg,data})=>{
                    showToast(msg)
                    this.userInfo.getClientMid.friend_status = data.friend_status
                    if(data.friend_status==1){
                        this.new_friend = {status:0}
                    }
                    //成为好友了 强制更新通讯录列表
                    if(data.friend_status==3){
                        this.$store.commit('setPageRefresh',{page:'contactStatus',status:true})
                    }
                })
            },
            //更新会话备注
            UpUserAlias(text){
                this.showNickname = false;
                //如果有修改内容
                if(text!=' ' && text!=this.userInfo.remark){
                    //本机同步修改
                    this.userInfo.remark = text
                    let params = {
                        mid:this.userInfo.mid,
                        alias:text,
                    }
                    // api 提交修改
                    ApiSetUserName(params).then(()=>{})
                }
            }
        },
        components:{
            upInfo,
        }
    }
</script>
<style>

</style>